<!--
	To use Highcharts instead of Flot
	1) Download highcharts.js and add to the js directory
	2) Uncomment the include line for highcharts js in index.html and view.html
-->

<html xmlns="http://www.w3.org/1999/html">

<head profile="http://www.w3.org/2005/10/profile">
	<link rel="icon"
		  type="image/png"
		  href="img/favicon.png"/>

	<link href="css/cupertino/jquery-ui-1.10.0.custom.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
	<link href="css/combobox.css" rel="stylesheet">
	<link href="css/jquery.dropdown.css" rel="stylesheet">
	<link href="css/date-time-picker.css" rel="stylesheet">

	<script src="js/jquery.1.9.0.min.js"></script>
	<script src="js/kairosdb.js"></script>
	<script src="js/kairosdb-query.js"></script>
	<script src="js/kairosdb-flot.js"></script>
	<script src="js/kairosdb-highcharts.js"></script>
	<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
	<script src="js/graph.js"></script>
	<script src="js/jquery.flot.min.js"></script>
	<script src="js/jquery.flot.time.js"></script>
	<script src="js/jquery.flot.selection.js"></script>
	<script src="js/jquery.flot.resize.js"></script>
	<script src="js/jquery.dropdown.min.js"></script>
	<script src="js/blob.js"></script>
	<script src="js/fileSaver.js"></script>
	<script src="js/dataExporter.js"></script>
	<!--<script src="js/highcharts.js"></script>-->
	<script src="js/combobox.js"></script>
	<script src="js/numeral.min.js"></script>
	<script src="js/moment.min.js"></script>
	<script src="js/moment-timezone-with-data.min.js"></script>
	<script src="js/date-time-picker.js"></script>

	<script>
		var metricNames = [];

		$(function () {
			if (!window.console) {
				window.console = {
					log: function () {
					}
				};
			} // If not console, don't log

			var $startTime = $("#startTime");
			var $endTime = $("#endTime");

			$("#saveButton").button().button("enable");
			$("#submitButtonJSON").button().click(exportJsonQueryData);
			$("#submitButtonCSV").button().click(exportCsvQueryData);
			$("#submitButton").button().click(updateChart);
			$("#showQueryButton").button().click(showQuery);
			$("#deleteButton").button().click(deleteDataPoints).button("disable");
			$startTime.datetimepicker({
				showTimezone: false,
				showTime: false,
				showMicrosec: false,
				showMillisec: true,
				dateFormat: "yy-mm-dd",
				timeFormat: "hh:mm:ss.l tt"
			});
			$endTime.datetimepicker({
				showTimezone: false,
				showTime: false,
				showMicrosec: false,
				showMillisec: true,
				dateFormat: "yy-mm-dd",
				timeFormat: "hh:mm:ss.l tt"
			});
			$("#resetZoom").hide();
			$("#errorContainer").hide();
			$("#metricTemplate").hide();
			$("#tagTemplate").hide();
			$("#aggregatorTemplate").hide();
			$("#groupByTemplate").hide();
			$("#groupByTagsTemplate").hide();
			$("#groupByTimeTemplate").hide();
			$("#groupByValueTemplate").hide();
			$("#groupByBinTemplate").hide();
			$(".aggregatorPercentile").hide();
			$(".divisor").hide();
			$(".scalingFactor").hide();
			$(".aggregatorFilter").hide();
			$(".aggregatorTrim").hide();
			$(".aggregatorSaveAs").hide();
			$(".aggregatorRate").hide();
			$("#tabs").tabs({'active': 0});

			$startTime.bind("change paste keyup", function () {
				// clear relative time if absolute time is set
				$("#startRelativeValue").val("");
			});

			$("#startRelativeValue").bind("change paste keyup", function () {
				// clear absolute time if relative time is set
				$startTime.val("");
			});

			$endTime.bind("change paste keyup", function () {
				// clear relative time if absolute time is set
				$("#endRelativeValue").val("");
			});

			$("#endRelativeValue").bind("change paste keyup", function () {
				// clear absolute time if relative time is set
				$endTime.val("");
			});

			addMetric();

			$("#groupByTagDialog").dialog(
					{
						resizable: false,
						autoOpen: false,
						width: 230,
						height: 75
					});
			$(".ui-dialog-titlebar").hide();


			$("#cancelTagNameButton").button({
				text: false,
				icons: {
					primary: 'ui-icon-close'
				}
			}).click(function () {
				$("#groupByTagDialog").dialog("close");
				$("#autocompleteTagName").val(""); // clear value
			});

			$("#addTagNameButton").button({text: true});

			$("#addMetricButton").button({
				text: false,
				icons: {
					primary: 'ui-icon-plus'
				}
			}).click(addMetric);

			updateMetricNamesArray();

			// Autocomplete for GroupBy dialog
			$("#autocompleteTagName").combobox().combobox({
				source: function (request, response) {
					var selectedTabIndex = $("#tabs").tabs("option", "active");
				var metricName = $('#metricContainer' + tabContainerMap[selectedTabIndex]).find(".metricName").combobox("value");
					if (metricName){
						var tags = [];
						$.each(metricToTags[metricName], function (tag) {
							tags.push(tag);
						});
						response(tags);
					}
				}
			});

			$(document).on("click", function (e) {
				// Close the groupBy dialog if it loses focus
				var clickedOnDialog = $(e.target)
						.closest(".ui-widget.ui-dialog")
						.children(".ui-dialog-content")
						.is(".tagDialog");

				var searchButton = $(e.target).is(".ui-icon-search") || $(e.target).is(".tagSearch");

				if (!clickedOnDialog && !searchButton) {
					$('.tagDialog').dialog('close');
				}
			});
		});
	</script>

</head>

<body>

<IMG src="img/logoSmall.png" alt="KairosDB Web UI" title="KairosDB Web UI"/>
<br>
<br>

<span class="header ui-widget">Time Range</span>

<div class="wire-frame" style="margin-top: 5px;">
	<table>
		<tr>
		<tr>
			<td colspan="3" align="center" class="ui-widget header">Absolute</td>
		<td colspan="2" align="center" class="ui-widget header">Relative</td>
		<td align="center" class="ui-widget header">Time Zone</td>
		</tr>
		<tr>
			<td class="ui-widget">From*</td>
			<td><input id="startTime" class="ui-widget" type="text"
					   style="width:200px;"/>
			</td>
			<td class="ui-widget">or</td>
			<td><input id="startRelativeValue" class="ui-widget"
					   style="width: 30px;" type="text" value="1">
				<select id="startRelativeUnit" class="ui-widget">
					<option value="years">Years</option>
					<option value="months">Months</option>
					<option value="weeks">Weeks</option>
					<option value="days">Days</option>
					<option value="hours" selected="true">Hours</option>
					<option value="minutes">Minutes</option>
					<option value="seconds">Seconds</option>
				</select>
			</td>
			<td class="ui-widget"> ago</td>
			<td rowspan="2">
				<select id="timeZone" class="ui-widget timeZone"
						style="margin-left: 10px;">
					<option value="" selected="selected">Default</option>
					<option value="Australia/ACT">ACT</option>
					<option value="Africa/Abidjan">Abidjan</option>
					<option value="Africa/Accra">Accra</option>
					<option value="Brazil/Acre">Acre</option>
					<option value="America/Adak">Adak</option>
					<option value="Africa/Addis_Ababa">Addis_Ababa</option>
					<option value="Australia/Adelaide">Adelaide</option>
					<option value="Asia/Aden">Aden</option>
					<option value="US/Alaska">Alaska</option>
					<option value="US/Aleutian">Aleutian</option>
					<option value="Africa/Algiers">Algiers</option>
					<option value="Asia/Almaty">Almaty</option>
					<option value="Asia/Amman">Amman</option>
					<option value="Europe/Amsterdam">Amsterdam</option>
					<option value="Asia/Anadyr">Anadyr</option>
					<option value="America/Anchorage">Anchorage</option>
					<option value="Europe/Andorra">Andorra</option>
					<option value="America/Anguilla">Anguilla</option>
					<option value="Indian/Antananarivo">Antananarivo</option>
					<option value="America/Antigua">Antigua</option>
					<option value="Pacific/Apia">Apia</option>
					<option value="Asia/Aqtau">Aqtau</option>
					<option value="Asia/Aqtobe">Aqtobe</option>
					<option value="America/Araguaina">Araguaina</option>
					<option value="America/Argentina/Ushuaia">Argentina</option>
					<option value="US/Arizona">Arizona</option>
					<option value="America/Aruba">Aruba</option>
					<option value="Asia/Ashgabat">Ashgabat</option>
					<option value="Asia/Ashkhabad">Ashkhabad</option>
					<option value="Africa/Asmara">Asmara</option>
					<option value="Africa/Asmera">Asmera</option>
					<option value="America/Asuncion">Asuncion</option>
					<option value="Europe/Athens">Athens</option>
					<option value="America/Atikokan">Atikokan</option>
					<option value="America/Atka">Atka</option>
					<option value="Canada/Atlantic">Atlantic</option>
					<option value="Pacific/Auckland">Auckland</option>
					<option value="Atlantic/Azores">Azores</option>
					<option value="Asia/Baghdad">Baghdad</option>
					<option value="America/Bahia">Bahia</option>
					<option value="America/Bahia_Banderas">Bahia_Banderas
					</option>
					<option value="Asia/Bahrain">Bahrain</option>
					<option value="Mexico/BajaNorte">BajaNorte</option>
					<option value="Mexico/BajaSur">BajaSur</option>
					<option value="Asia/Baku">Baku</option>
					<option value="Africa/Bamako">Bamako</option>
					<option value="Asia/Bangkok">Bangkok</option>
					<option value="Africa/Bangui">Bangui</option>
					<option value="Africa/Banjul">Banjul</option>
					<option value="America/Barbados">Barbados</option>
					<option value="Asia/Beirut">Beirut</option>
					<option value="America/Belem">Belem</option>
					<option value="Europe/Belfast">Belfast</option>
					<option value="Europe/Belgrade">Belgrade</option>
					<option value="America/Belize">Belize</option>
					<option value="Europe/Berlin">Berlin</option>
					<option value="Atlantic/Bermuda">Bermuda</option>
					<option value="Asia/Bishkek">Bishkek</option>
					<option value="Africa/Bissau">Bissau</option>
					<option value="America/Blanc-Sablon">Blanc-Sablon</option>
					<option value="Africa/Blantyre">Blantyre</option>
					<option value="America/Boa_Vista">Boa_Vista</option>
					<option value="America/Bogota">Bogota</option>
					<option value="America/Boise">Boise</option>
					<option value="Europe/Bratislava">Bratislava</option>
					<option value="Africa/Brazzaville">Brazzaville</option>
					<option value="Australia/Brisbane">Brisbane</option>
					<option value="Australia/Broken_Hill">Broken_Hill</option>
					<option value="Asia/Brunei">Brunei</option>
					<option value="Europe/Brussels">Brussels</option>
					<option value="Europe/Bucharest">Bucharest</option>
					<option value="Europe/Budapest">Budapest</option>
					<option value="America/Buenos_Aires">Buenos_Aires</option>
					<option value="Africa/Bujumbura">Bujumbura</option>
					<option value="CET">CET</option>
					<option value="CST6CDT">CST6CDT</option>
					<option value="Africa/Cairo">Cairo</option>
					<option value="Asia/Calcutta">Calcutta</option>
					<option value="America/Cambridge_Bay">Cambridge_Bay</option>
					<option value="America/Campo_Grande">Campo_Grande</option>
					<option value="Atlantic/Canary">Canary</option>
					<option value="Australia/Canberra">Canberra</option>
					<option value="America/Cancun">Cancun</option>
					<option value="Atlantic/Cape_Verde">Cape_Verde</option>
					<option value="America/Caracas">Caracas</option>
					<option value="Africa/Casablanca">Casablanca</option>
					<option value="Antarctica/Casey">Casey</option>
					<option value="America/Catamarca">Catamarca</option>
					<option value="America/Cayenne">Cayenne</option>
					<option value="America/Cayman">Cayman</option>
					<option value="US/Central">Central</option>
					<option value="Africa/Ceuta">Ceuta</option>
					<option value="Indian/Chagos">Chagos</option>
					<option value="Pacific/Chatham">Chatham</option>
					<option value="America/Chicago">Chicago</option>
					<option value="America/Chihuahua">Chihuahua</option>
					<option value="Europe/Chisinau">Chisinau</option>
					<option value="Asia/Choibalsan">Choibalsan</option>
					<option value="Asia/Chongqing">Chongqing</option>
					<option value="Indian/Christmas">Christmas</option>
					<option value="Asia/Chungking">Chungking</option>
					<option value="Pacific/Chuuk">Chuuk</option>
					<option value="Indian/Cocos">Cocos</option>
					<option value="Asia/Colombo">Colombo</option>
					<option value="Indian/Comoro">Comoro</option>
					<option value="Africa/Conakry">Conakry</option>
					<option value="Chile/Continental">Continental</option>
					<option value="Europe/Copenhagen">Copenhagen</option>
					<option value="America/Coral_Harbour">Coral_Harbour</option>
					<option value="America/Cordoba">Cordoba</option>
					<option value="America/Costa_Rica">Costa_Rica</option>
					<option value="America/Creston">Creston</option>
					<option value="Cuba">Cuba</option>
					<option value="America/Cuiaba">Cuiaba</option>
					<option value="America/Curacao">Curacao</option>
					<option value="Australia/Currie">Currie</option>
					<option value="Asia/Dacca">Dacca</option>
					<option value="Africa/Dakar">Dakar</option>
					<option value="Asia/Damascus">Damascus</option>
					<option value="America/Danmarkshavn">Danmarkshavn</option>
					<option value="Africa/Dar_es_Salaam">Dar_es_Salaam</option>
					<option value="Australia/Darwin">Darwin</option>
					<option value="Antarctica/Davis">Davis</option>
					<option value="America/Dawson">Dawson</option>
					<option value="America/Dawson_Creek">Dawson_Creek</option>
					<option value="Brazil/DeNoronha">DeNoronha</option>
					<option value="America/Denver">Denver</option>
					<option value="America/Detroit">Detroit</option>
					<option value="Asia/Dhaka">Dhaka</option>
					<option value="Asia/Dili">Dili</option>
					<option value="Africa/Djibouti">Djibouti</option>
					<option value="America/Dominica">Dominica</option>
					<option value="Africa/Douala">Douala</option>
					<option value="Asia/Dubai">Dubai</option>
					<option value="Europe/Dublin">Dublin</option>
					<option value="Antarctica/DumontDUrville">DumontDUrville
					</option>
					<option value="Asia/Dushanbe">Dushanbe</option>
					<option value="EET">EET</option>
					<option value="EST">EST</option>
					<option value="EST5EDT">EST5EDT</option>
					<option value="Brazil/East">East</option>
					<option value="US/East-Indiana">East-Indiana</option>
					<option value="Canada/East-Saskatchewan">East-Saskatchewan
					</option>
					<option value="Pacific/Easter">Easter</option>
					<option value="Chile/EasterIsland">EasterIsland</option>
					<option value="US/Eastern">Eastern</option>
					<option value="America/Edmonton">Edmonton</option>
					<option value="Pacific/Efate">Efate</option>
					<option value="Egypt">Egypt</option>
					<option value="Eire">Eire</option>
					<option value="America/Eirunepe">Eirunepe</option>
					<option value="Africa/El_Aaiun">El_Aaiun</option>
					<option value="America/El_Salvador">El_Salvador</option>
					<option value="Pacific/Enderbury">Enderbury</option>
					<option value="America/Ensenada">Ensenada</option>
					<option value="Australia/Eucla">Eucla</option>
					<option value="Atlantic/Faeroe">Faeroe</option>
					<option value="Pacific/Fakaofo">Fakaofo</option>
					<option value="Atlantic/Faroe">Faroe</option>
					<option value="Pacific/Fiji">Fiji</option>
					<option value="America/Fort_Wayne">Fort_Wayne</option>
					<option value="America/Fortaleza">Fortaleza</option>
					<option value="Africa/Freetown">Freetown</option>
					<option value="Pacific/Funafuti">Funafuti</option>
					<option value="GB">GB</option>
					<option value="GB-Eire">GB-Eire</option>
					<option value="GMT">GMT</option>
					<option value="GMT+0">GMT+0</option>
					<option value="Etc/GMT+1">GMT+1</option>
					<option value="Etc/GMT+10">GMT+10</option>
					<option value="Etc/GMT+11">GMT+11</option>
					<option value="Etc/GMT+12">GMT+12</option>
					<option value="Etc/GMT+2">GMT+2</option>
					<option value="Etc/GMT+3">GMT+3</option>
					<option value="Etc/GMT+4">GMT+4</option>
					<option value="Etc/GMT+5">GMT+5</option>
					<option value="Etc/GMT+6">GMT+6</option>
					<option value="Etc/GMT+7">GMT+7</option>
					<option value="Etc/GMT+8">GMT+8</option>
					<option value="Etc/GMT+9">GMT+9</option>
					<option value="GMT-0">GMT-0</option>
					<option value="Etc/GMT-1">GMT-1</option>
					<option value="Etc/GMT-10">GMT-10</option>
					<option value="Etc/GMT-11">GMT-11</option>
					<option value="Etc/GMT-12">GMT-12</option>
					<option value="Etc/GMT-13">GMT-13</option>
					<option value="Etc/GMT-14">GMT-14</option>
					<option value="Etc/GMT-2">GMT-2</option>
					<option value="Etc/GMT-3">GMT-3</option>
					<option value="Etc/GMT-4">GMT-4</option>
					<option value="Etc/GMT-5">GMT-5</option>
					<option value="Etc/GMT-6">GMT-6</option>
					<option value="Etc/GMT-7">GMT-7</option>
					<option value="Etc/GMT-8">GMT-8</option>
					<option value="Etc/GMT-9">GMT-9</option>
					<option value="GMT0">GMT0</option>
					<option value="Africa/Gaborone">Gaborone</option>
					<option value="Pacific/Galapagos">Galapagos</option>
					<option value="Pacific/Gambier">Gambier</option>
					<option value="Asia/Gaza">Gaza</option>
					<option value="Mexico/General">General</option>
					<option value="Europe/Gibraltar">Gibraltar</option>
					<option value="America/Glace_Bay">Glace_Bay</option>
					<option value="America/Godthab">Godthab</option>
					<option value="America/Goose_Bay">Goose_Bay</option>
					<option value="America/Grand_Turk">Grand_Turk</option>
					<option value="Greenwich">Greenwich</option>
					<option value="America/Grenada">Grenada</option>
					<option value="Pacific/Guadalcanal">Guadalcanal</option>
					<option value="America/Guadeloupe">Guadeloupe</option>
					<option value="Pacific/Guam">Guam</option>
					<option value="America/Guatemala">Guatemala</option>
					<option value="America/Guayaquil">Guayaquil</option>
					<option value="Europe/Guernsey">Guernsey</option>
					<option value="America/Guyana">Guyana</option>
					<option value="HST">HST</option>
					<option value="America/Halifax">Halifax</option>
					<option value="Africa/Harare">Harare</option>
					<option value="Asia/Harbin">Harbin</option>
					<option value="America/Havana">Havana</option>
					<option value="US/Hawaii">Hawaii</option>
					<option value="Asia/Hebron">Hebron</option>
					<option value="Europe/Helsinki">Helsinki</option>
					<option value="America/Hermosillo">Hermosillo</option>
					<option value="Asia/Ho_Chi_Minh">Ho_Chi_Minh</option>
					<option value="Australia/Hobart">Hobart</option>
					<option value="Asia/Hong_Kong">Hong_Kong</option>
					<option value="Hongkong">Hongkong</option>
					<option value="Pacific/Honolulu">Honolulu</option>
					<option value="Asia/Hovd">Hovd</option>
					<option value="Iceland">Iceland</option>
					<option value="America/Indiana/Winamac">Indiana</option>
					<option value="US/Indiana-Starke">Indiana-Starke</option>
					<option value="America/Indianapolis">Indianapolis</option>
					<option value="America/Inuvik">Inuvik</option>
					<option value="America/Iqaluit">Iqaluit</option>
					<option value="Iran">Iran</option>
					<option value="Asia/Irkutsk">Irkutsk</option>
					<option value="Europe/Isle_of_Man">Isle_of_Man</option>
					<option value="Israel">Israel</option>
					<option value="Europe/Istanbul">Istanbul</option>
					<option value="Asia/Jakarta">Jakarta</option>
					<option value="Jamaica">Jamaica</option>
					<option value="Atlantic/Jan_Mayen">Jan_Mayen</option>
					<option value="Japan">Japan</option>
					<option value="Asia/Jayapura">Jayapura</option>
					<option value="Europe/Jersey">Jersey</option>
					<option value="Asia/Jerusalem">Jerusalem</option>
					<option value="Africa/Johannesburg">Johannesburg</option>
					<option value="Pacific/Johnston">Johnston</option>
					<option value="Africa/Juba">Juba</option>
					<option value="America/Jujuy">Jujuy</option>
					<option value="America/Juneau">Juneau</option>
					<option value="Asia/Kabul">Kabul</option>
					<option value="Europe/Kaliningrad">Kaliningrad</option>
					<option value="Asia/Kamchatka">Kamchatka</option>
					<option value="Africa/Kampala">Kampala</option>
					<option value="Asia/Karachi">Karachi</option>
					<option value="Asia/Kashgar">Kashgar</option>
					<option value="Asia/Kathmandu">Kathmandu</option>
					<option value="Asia/Katmandu">Katmandu</option>
					<option value="America/Kentucky/Monticello">Kentucky
					</option>
					<option value="Indian/Kerguelen">Kerguelen</option>
					<option value="Africa/Khartoum">Khartoum</option>
					<option value="Europe/Kiev">Kiev</option>
					<option value="Africa/Kigali">Kigali</option>
					<option value="Africa/Kinshasa">Kinshasa</option>
					<option value="Pacific/Kiritimati">Kiritimati</option>
					<option value="America/Knox_IN">Knox_IN</option>
					<option value="Asia/Kolkata">Kolkata</option>
					<option value="Pacific/Kosrae">Kosrae</option>
					<option value="America/Kralendijk">Kralendijk</option>
					<option value="Asia/Krasnoyarsk">Krasnoyarsk</option>
					<option value="Asia/Kuala_Lumpur">Kuala_Lumpur</option>
					<option value="Asia/Kuching">Kuching</option>
					<option value="Asia/Kuwait">Kuwait</option>
					<option value="Pacific/Kwajalein">Kwajalein</option>
					<option value="Australia/LHI">LHI</option>
					<option value="America/La_Paz">La_Paz</option>
					<option value="Africa/Lagos">Lagos</option>
					<option value="Africa/Libreville">Libreville</option>
					<option value="Libya">Libya</option>
					<option value="America/Lima">Lima</option>
					<option value="Australia/Lindeman">Lindeman</option>
					<option value="Europe/Lisbon">Lisbon</option>
					<option value="Europe/Ljubljana">Ljubljana</option>
					<option value="Africa/Lome">Lome</option>
					<option value="Europe/London">London</option>
					<option value="Arctic/Longyearbyen">Longyearbyen</option>
					<option value="Australia/Lord_Howe">Lord_Howe</option>
					<option value="America/Los_Angeles">Los_Angeles</option>
					<option value="America/Louisville">Louisville</option>
					<option value="America/Lower_Princes">Lower_Princes</option>
					<option value="Africa/Luanda">Luanda</option>
					<option value="Africa/Lubumbashi">Lubumbashi</option>
					<option value="Africa/Lusaka">Lusaka</option>
					<option value="Europe/Luxembourg">Luxembourg</option>
					<option value="MET">MET</option>
					<option value="MST">MST</option>
					<option value="MST7MDT">MST7MDT</option>
					<option value="Asia/Macao">Macao</option>
					<option value="Asia/Macau">Macau</option>
					<option value="America/Maceio">Maceio</option>
					<option value="Antarctica/Macquarie">Macquarie</option>
					<option value="Atlantic/Madeira">Madeira</option>
					<option value="Europe/Madrid">Madrid</option>
					<option value="Asia/Magadan">Magadan</option>
					<option value="Indian/Mahe">Mahe</option>
					<option value="Pacific/Majuro">Majuro</option>
					<option value="Asia/Makassar">Makassar</option>
					<option value="Africa/Malabo">Malabo</option>
					<option value="Indian/Maldives">Maldives</option>
					<option value="Europe/Malta">Malta</option>
					<option value="America/Managua">Managua</option>
					<option value="America/Manaus">Manaus</option>
					<option value="Asia/Manila">Manila</option>
					<option value="Africa/Maputo">Maputo</option>
					<option value="Europe/Mariehamn">Mariehamn</option>
					<option value="America/Marigot">Marigot</option>
					<option value="Pacific/Marquesas">Marquesas</option>
					<option value="America/Martinique">Martinique</option>
					<option value="Africa/Maseru">Maseru</option>
					<option value="America/Matamoros">Matamoros</option>
					<option value="Indian/Mauritius">Mauritius</option>
					<option value="Antarctica/Mawson">Mawson</option>
					<option value="Indian/Mayotte">Mayotte</option>
					<option value="America/Mazatlan">Mazatlan</option>
					<option value="Africa/Mbabane">Mbabane</option>
					<option value="Antarctica/McMurdo">McMurdo</option>
					<option value="Australia/Melbourne">Melbourne</option>
					<option value="America/Mendoza">Mendoza</option>
					<option value="America/Menominee">Menominee</option>
					<option value="America/Merida">Merida</option>
					<option value="America/Metlakatla">Metlakatla</option>
					<option value="America/Mexico_City">Mexico_City</option>
					<option value="US/Michigan">Michigan</option>
					<option value="Pacific/Midway">Midway</option>
					<option value="Europe/Minsk">Minsk</option>
					<option value="America/Miquelon">Miquelon</option>
					<option value="Africa/Mogadishu">Mogadishu</option>
					<option value="Europe/Monaco">Monaco</option>
					<option value="America/Moncton">Moncton</option>
					<option value="Africa/Monrovia">Monrovia</option>
					<option value="America/Monterrey">Monterrey</option>
					<option value="America/Montevideo">Montevideo</option>
					<option value="America/Montreal">Montreal</option>
					<option value="America/Montserrat">Montserrat</option>
					<option value="Europe/Moscow">Moscow</option>
					<option value="US/Mountain">Mountain</option>
					<option value="Asia/Muscat">Muscat</option>
					<option value="Australia/NSW">NSW</option>
					<option value="NZ">NZ</option>
					<option value="NZ-CHAT">NZ-CHAT</option>
					<option value="Africa/Nairobi">Nairobi</option>
					<option value="America/Nassau">Nassau</option>
					<option value="Pacific/Nauru">Nauru</option>
					<option value="Navajo">Navajo</option>
					<option value="Africa/Ndjamena">Ndjamena</option>
					<option value="America/New_York">New_York</option>
					<option value="Canada/Newfoundland">Newfoundland</option>
					<option value="Africa/Niamey">Niamey</option>
					<option value="Europe/Nicosia">Nicosia</option>
					<option value="America/Nipigon">Nipigon</option>
					<option value="Pacific/Niue">Niue</option>
					<option value="America/Nome">Nome</option>
					<option value="Pacific/Norfolk">Norfolk</option>
					<option value="America/Noronha">Noronha</option>
					<option value="Australia/North">North</option>
					<option value="America/North_Dakota/New_Salem">
						North_Dakota
					</option>
					<option value="Africa/Nouakchott">Nouakchott</option>
					<option value="Pacific/Noumea">Noumea</option>
					<option value="Asia/Novokuznetsk">Novokuznetsk</option>
					<option value="Asia/Novosibirsk">Novosibirsk</option>
					<option value="America/Ojinaga">Ojinaga</option>
					<option value="Asia/Omsk">Omsk</option>
					<option value="Asia/Oral">Oral</option>
					<option value="Europe/Oslo">Oslo</option>
					<option value="Africa/Ouagadougou">Ouagadougou</option>
					<option value="PRC">PRC</option>
					<option value="PST8PDT">PST8PDT</option>
					<option value="US/Pacific">Pacific</option>
					<option value="US/Pacific-New">Pacific-New</option>
					<option value="Pacific/Pago_Pago">Pago_Pago</option>
					<option value="Pacific/Palau">Palau</option>
					<option value="Antarctica/Palmer">Palmer</option>
					<option value="America/Panama">Panama</option>
					<option value="America/Pangnirtung">Pangnirtung</option>
					<option value="America/Paramaribo">Paramaribo</option>
					<option value="Europe/Paris">Paris</option>
					<option value="Australia/Perth">Perth</option>
					<option value="Asia/Phnom_Penh">Phnom_Penh</option>
					<option value="America/Phoenix">Phoenix</option>
					<option value="Pacific/Pitcairn">Pitcairn</option>
					<option value="Europe/Podgorica">Podgorica</option>
					<option value="Pacific/Pohnpei">Pohnpei</option>
					<option value="Poland">Poland</option>
					<option value="Pacific/Ponape">Ponape</option>
					<option value="Asia/Pontianak">Pontianak</option>
					<option value="America/Port-au-Prince">Port-au-Prince
					</option>
					<option value="Pacific/Port_Moresby">Port_Moresby</option>
					<option value="America/Port_of_Spain">Port_of_Spain</option>
					<option value="Africa/Porto-Novo">Porto-Novo</option>
					<option value="America/Porto_Acre">Porto_Acre</option>
					<option value="America/Porto_Velho">Porto_Velho</option>
					<option value="Portugal">Portugal</option>
					<option value="Europe/Prague">Prague</option>
					<option value="America/Puerto_Rico">Puerto_Rico</option>
					<option value="Asia/Pyongyang">Pyongyang</option>
					<option value="Asia/Qatar">Qatar</option>
					<option value="Australia/Queensland">Queensland</option>
					<option value="Asia/Qyzylorda">Qyzylorda</option>
					<option value="ROC">ROC</option>
					<option value="ROK">ROK</option>
					<option value="America/Rainy_River">Rainy_River</option>
					<option value="Asia/Rangoon">Rangoon</option>
					<option value="America/Rankin_Inlet">Rankin_Inlet</option>
					<option value="Pacific/Rarotonga">Rarotonga</option>
					<option value="America/Recife">Recife</option>
					<option value="America/Regina">Regina</option>
					<option value="America/Resolute">Resolute</option>
					<option value="Indian/Reunion">Reunion</option>
					<option value="Atlantic/Reykjavik">Reykjavik</option>
					<option value="Europe/Riga">Riga</option>
					<option value="America/Rio_Branco">Rio_Branco</option>
					<option value="Asia/Riyadh">Riyadh</option>
					<option value="Europe/Rome">Rome</option>
					<option value="America/Rosario">Rosario</option>
					<option value="Antarctica/Rothera">Rothera</option>
					<option value="Asia/Saigon">Saigon</option>
					<option value="Pacific/Saipan">Saipan</option>
					<option value="Asia/Sakhalin">Sakhalin</option>
					<option value="Europe/Samara">Samara</option>
					<option value="Asia/Samarkand">Samarkand</option>
					<option value="US/Samoa">Samoa</option>
					<option value="Europe/San_Marino">San_Marino</option>
					<option value="America/Santa_Isabel">Santa_Isabel</option>
					<option value="America/Santarem">Santarem</option>
					<option value="America/Santiago">Santiago</option>
					<option value="America/Santo_Domingo">Santo_Domingo</option>
					<option value="America/Sao_Paulo">Sao_Paulo</option>
					<option value="Africa/Sao_Tome">Sao_Tome</option>
					<option value="Europe/Sarajevo">Sarajevo</option>
					<option value="Canada/Saskatchewan">Saskatchewan</option>
					<option value="America/Scoresbysund">Scoresbysund</option>
					<option value="Asia/Seoul">Seoul</option>
					<option value="Asia/Shanghai">Shanghai</option>
					<option value="America/Shiprock">Shiprock</option>
					<option value="Europe/Simferopol">Simferopol</option>
					<option value="Singapore">Singapore</option>
					<option value="America/Sitka">Sitka</option>
					<option value="Europe/Skopje">Skopje</option>
					<option value="Europe/Sofia">Sofia</option>
					<option value="Australia/South">South</option>
					<option value="Atlantic/South_Georgia">South_Georgia
					</option>
					<option value="Antarctica/South_Pole">South_Pole</option>
					<option value="America/St_Barthelemy">St_Barthelemy</option>
					<option value="Atlantic/St_Helena">St_Helena</option>
					<option value="America/St_Johns">St_Johns</option>
					<option value="America/St_Kitts">St_Kitts</option>
					<option value="America/St_Lucia">St_Lucia</option>
					<option value="America/St_Thomas">St_Thomas</option>
					<option value="America/St_Vincent">St_Vincent</option>
					<option value="Atlantic/Stanley">Stanley</option>
					<option value="Europe/Stockholm">Stockholm</option>
					<option value="America/Swift_Current">Swift_Current</option>
					<option value="Australia/Sydney">Sydney</option>
					<option value="Antarctica/Syowa">Syowa</option>
					<option value="Pacific/Tahiti">Tahiti</option>
					<option value="Asia/Taipei">Taipei</option>
					<option value="Europe/Tallinn">Tallinn</option>
					<option value="Pacific/Tarawa">Tarawa</option>
					<option value="Asia/Tashkent">Tashkent</option>
					<option value="Australia/Tasmania">Tasmania</option>
					<option value="Asia/Tbilisi">Tbilisi</option>
					<option value="America/Tegucigalpa">Tegucigalpa</option>
					<option value="Asia/Tehran">Tehran</option>
					<option value="Asia/Tel_Aviv">Tel_Aviv</option>
					<option value="Asia/Thimbu">Thimbu</option>
					<option value="Asia/Thimphu">Thimphu</option>
					<option value="America/Thule">Thule</option>
					<option value="America/Thunder_Bay">Thunder_Bay</option>
					<option value="America/Tijuana">Tijuana</option>
					<option value="Africa/Timbuktu">Timbuktu</option>
					<option value="Europe/Tirane">Tirane</option>
					<option value="Europe/Tiraspol">Tiraspol</option>
					<option value="Asia/Tokyo">Tokyo</option>
					<option value="Pacific/Tongatapu">Tongatapu</option>
					<option value="America/Toronto">Toronto</option>
					<option value="America/Tortola">Tortola</option>
					<option value="Africa/Tripoli">Tripoli</option>
					<option value="Pacific/Truk">Truk</option>
					<option value="Africa/Tunis">Tunis</option>
					<option value="Turkey">Turkey</option>
					<option value="UCT">UCT</option>
					<option value="UTC">UTC</option>
					<option value="Asia/Ujung_Pandang">Ujung_Pandang</option>
					<option value="Asia/Ulaanbaatar">Ulaanbaatar</option>
					<option value="Asia/Ulan_Bator">Ulan_Bator</option>
					<option value="Universal">Universal</option>
					<option value="Asia/Urumqi">Urumqi</option>
					<option value="Europe/Uzhgorod">Uzhgorod</option>
					<option value="Europe/Vaduz">Vaduz</option>
					<option value="America/Vancouver">Vancouver</option>
					<option value="Europe/Vatican">Vatican</option>
					<option value="Australia/Victoria">Victoria</option>
					<option value="Europe/Vienna">Vienna</option>
					<option value="Asia/Vientiane">Vientiane</option>
					<option value="Europe/Vilnius">Vilnius</option>
					<option value="America/Virgin">Virgin</option>
					<option value="Asia/Vladivostok">Vladivostok</option>
					<option value="Europe/Volgograd">Volgograd</option>
					<option value="Antarctica/Vostok">Vostok</option>
					<option value="W-SU">W-SU</option>
					<option value="WET">WET</option>
					<option value="Pacific/Wake">Wake</option>
					<option value="Pacific/Wallis">Wallis</option>
					<option value="Europe/Warsaw">Warsaw</option>
					<option value="Brazil/West">West</option>
					<option value="America/Whitehorse">Whitehorse</option>
					<option value="Africa/Windhoek">Windhoek</option>
					<option value="America/Winnipeg">Winnipeg</option>
					<option value="America/Yakutat">Yakutat</option>
					<option value="Asia/Yakutsk">Yakutsk</option>
					<option value="Australia/Yancowinna">Yancowinna</option>
					<option value="Pacific/Yap">Yap</option>
					<option value="Asia/Yekaterinburg">Yekaterinburg</option>
					<option value="America/Yellowknife">Yellowknife</option>
					<option value="Asia/Yerevan">Yerevan</option>
					<option value="Canada/Yukon">Yukon</option>
					<option value="Europe/Zagreb">Zagreb</option>
					<option value="Europe/Zaporozhye">Zaporozhye</option>
					<option value="Zulu">Zulu</option>
					<option value="Europe/Zurich">Zurich</option>
				</select>
			</td>
		</tr>
		<tr>
			<td class="ui-widget">To</td>
			<td><input id="endTime" class="ui-widget" type="text"
					   style="width:200px;"/></td>
			<td class="ui-widget">or</td>
			<td><input id="endRelativeValue" class="ui-widget"
					   style="width: 30px;" type="text">
				<select id="endRelativeUnit" class="ui-widget">
					<option value="years">Years</option>
					<option value="months">Months</option>
					<option value="weeks">Weeks</option>
					<option value="days">Days</option>
					<option value="hours">Hours</option>
					<option value="minutes">Minutes</option>
					<option value="seconds">Seconds</option>
				</select>
			</td>
			<td class="ui-widget"> ago</td>
		</tr>
	</table>
</div>

<p></p>

<span class="header ui-widget">Metrics</span>
<button id="addMetricButton"></button>

<div id="tabs" style="width:575px; background:none;margin-top: 5px;">
	<ul></ul>
</div>

<div class="ui-widget footnote">* Required Fields</div>

<p></p>
<button id="submitButton" style="margin-top: 10px;">Graph</button>
<button id="showQueryButton" style="margin-top: 10px;">Show Query</button>
<button id="saveButton" style="margin-top: 10px;" value="Dropdown"
		data-dropdown="#saveDropdown">Save
</button>
<button id="deleteButton" style="margin-top: 10px;">Delete Data</button>

<div class="ui-widget">
	<div id="errorContainer" class="ui-state-error ui-corner-all"
		 style="padding:5px; width: 500px;">
	</div>
</div>

<div class="query-window" style="display: none">
<span class="header ui-widget">Query in
	<input class="ui-widget" type="radio" name="query-type" id="query-type-json"
		   checked onclick="displayQuery()"/><label
			for="query-type-json">JSON</label> or
	<input type="radio" name="query-type" id="query-type-js-object"
		   onclick="displayQuery()"/><label
			for="query-type-js-object">JS Object</label></span> <br>
	<input type="hidden" id="query-hidden-text"/>
	<textarea id="query-text" class="ui-widget" rows="5"
			  style="margin-top: 5px;"></textarea>
</div>

<p>
	<a id="graph_link" href="" target="_blank" style="display: none">Link to
		Graph</a>
</p>
<span class="header ui-widget">Query Time: </span><span id="queryTime"
														class="ui-widget"></span><br>
<span class="header ui-widget">Sample Size: </span><span id="sampleSize"
														 class="ui-widget"></span><br>
<span class="header ui-widget">Data Points: </span><span id="numDataPoints"
														 class="ui-widget"></span><br>
<span id="status" class="ui-widget"></span>

<table style="width: 100%;">
	<tr>
		<td align="right">
			<div id="graphLegend"></div>
		</td>
	</tr>
	<tr>
		<td>
			<div id="flotTitle" class="graphSubtitle"></div>
		</td>
		<td></td>
	</tr>
	<tr>
		<td style="width: 100%;">
			<div id="chartContainer"></div>
		</td>
	</tr>
</table>

<button id="resetZoom" class=ui-widget>Reset Zoom</button>

<div id="container"></div>

<!-- Hidden Metric div used for cloning -->
<div id="metricTemplate">
	<table class="ui-widget metricNameTable">
		<tr>
			<td class="ui-widget">Name*</td>
			<td><input class="ui-widget metricName" style="width: 500px"></td>
			<td>
				<button class="ui-widget refresh-metric-names"
						title="Update metric names"
						style="height: 20px;"></button>
			</td>
		</tr>
	</table>

	<p></p>
	<span class="header ui-widget">Limit</span>
	<input class="ui-widget" type="text" name="limit" value=""
		   style="margin-left: 5px; height:18px;" size="10"/>

	<p></p>
	<span class="header ui-widget">Group By</span>
	<button id="addGroupByButton"></button>

	<div id="groupByContainer"></div>

	<p></p>
	<span class="header ui-widget">Aggregators</span>
	<button id="addAggregatorButton"></button>

	<div id="aggregatorContainer"></div>

	<p></p>
	<span class="header ui-widget">Tags</span>
	<button id="tagButton"></button>

	<div id="tagsContainer" style="margin-bottom: 5px;"></div>

	<div class="checkbox" style="display:table">
		<div style="display: table-row">
			<div style="display: table-cell;"><input class="scale"
													 type="checkbox"/></div>
			<div style="display: table-cell; vertical-align: middle">Scale and
				add Y-axis
			</div>
		</div>
	</div>
</div>

<!-- Hidden Tag div used for cloning -->
<div id="tagTemplate" style="margin-top: 10px;">
	<div name="tags" id="tagContainer" class="component-frame"
		 style="margin-bottom: 5px; margin-left: 15px;">
		<button class="removeTag"
				style="background:none; border: none; width:5px; float:right; margin-right: 5px; margin-top: 0;"></button>
		<span class="ui-widget">Name</span>
		<span><input id="tagName" name="tagName" class="ui-widget" type="text"
					 style="margin-left: 4px;"/></span>
		<span class="ui-widget" style="margin-left: 4px;">Value</span>
		<span><input id="tagValue" name="tagValue" class="ui-widget" type="text"
					 style="margin-left: 4px; margin-bottom: 5px;"/></span>
	</div>
</div>

<!-- Hidden GroupBy div used for cloning -->
<div id="groupByTemplate" class="component-frame groupBy"
	 style="margin-left: 15px; margin-top: 3px; margin-bottom: 5px; display: table;">
	<button class="removeGroupBy"
			style="background:none; border: none; width:5px; float:right; margin-right: 5px; margin-top: 0;"></button>
	<div style="display: table-row">
		<div style="display: table-cell">
			<select class="ui-widget groupByName">
				<option value="tags">Tags</option>
				<option value="time">Time</option>
				<option value="value">Value</option>
				<option value="bin">Bin</option>
			</select>
		</div>
		<div class="groupByContent"></div>
	</div>
</div>

<!-- Hidden GroupBy div used for cloning -->
<div id="groupByTagsTemplate">
	<div style="display: table-cell">
		<span class="header" style="margin-left: 30px; vertical-align: top;">Tags</span>
	</div>
	<div style="display: table-cell">
		<input class="ui-widget groupByTagsValue"
			   style="width: 250px; margin-left: 10px;" type="text">
		<br>
		<span class="ui-widget" style="font-size: xx-small;margin-left: 10px;">*Comma or space separated list</span>
	</div>
	<div style="display: table-cell;">
		<button class="tagSearch"></button>
	</div>
</div>

<!-- Hidden GroupBy div used for cloning -->
<div id="groupByTimeTemplate">
	<div style="display: table-cell">
		<span class="header" style="margin-left: 30px; vertical-align: top;">Target Size</span>
	</div>

	<div style="display: table-cell">
		<input class="ui-widget groupByTimeSizeValue"
			   style="width: 30px; margin-left: 10px;" type="text"
			   value="1">
	</div>
	<div style="display: table-cell;">
		<select class="ui-widget groupByTimeUnit" style="margin-left: 10px;">
			<option value="years">Years</option>
			<option value="months">Months</option>
			<option value="weeks">Weeks</option>
			<option value="days">Days</option>
			<option value="hours">Hours</option>
			<option value="minutes">Minutes</option>
			<option value="seconds">Seconds</option>
			<option value="milliseconds" selected="selected">Milliseconds
			</option>
		</select>
	</div>

	<div style="display: table-cell">
		<span class="header" style="margin-left: 30px; vertical-align: top;">Count</span>
	</div>
	<div style="display: table-cell">
		<input class="ui-widget groupByTimeCount"
			   style="width: 30px; margin-left: 10px;" type="text">
	</div>
</div>

<!-- Hidden GroupBy div used for cloning -->
<div id="groupByValueTemplate">
	<div style="display: table-cell">
		<span class="header" style="margin-left: 30px; vertical-align: top;">Target Size</span>
	</div>
	<div style="display: table-cell">
		<input class="ui-widget groupByValueValue"
			   style="width: 40px; margin-left: 10px;" type="text">
	</div>
</div>

<!-- Hidden GroupBy div used for cloning -->
<div id="groupByBinTemplate">
	<div style="display: table-cell">
		<span class="header" style="margin-left: 30px; vertical-align: top;">Bin Values</span>
	</div>
	<div style="display: table-cell">
		<input class="ui-widget groupByBinValue"
			   style="width: 100%; margin-left: 10px;" type="text">
		<br>
		<span class="ui-widget" style="font-size: xx-small;margin-left: 10px;">*Comma separated list</span>
	</div>
</div>

<!-- Hidden GroupBy Dialog. Used for auto-completion of tag name -->
<div id="groupByTagDialog" class="tagDialog" style="overflow:visible">
	<button id="cancelTagNameButton" class="ui-widget"
			style="background:none; border: none; width:5px; float:right; margin-right: 5px; margin-top: 0;"></button>
	<span class="ui-widget header">Search for tag name.</span>
	<br>

	<input id="autocompleteTagName" class="ui-widget" style="width: 120px;"
		   type="text">
	<button id="addTagNameButton">Add</button>
</div>

<!-- Hidden Aggregator div used for cloning -->
<div id="aggregatorTemplate" class="component-frame aggregator"
	 style="margin-left: 15px; margin-top: 3px; display: table;">
	<button class="removeAggregator"
			style="background:none; border: none; width:5px; float:right; margin-right: 5px; margin-top: 0;"></button>

	<div style="">
		<div style="float: left">
			<select class="ui-widget aggregatorName">
				<option value="avg">AVG</option>
				<option value="count">COUNT</option>
				<option value="dev">DEV</option>
				<option value="diff">DIFF</option>
				<option value="div">DIV</option>
				<option value="first">FIRST</option>
				<option value="gaps">GAPS</option>
				<option value="last">LAST</option>
				<option value="least_squares">LEAST SQUARES</option>
				<option value="max">MAX</option>
				<option value="min">MIN</option>
				<option value="percentile">PERCENTILE</option>
				<option value="rate">RATE</option>
				<option value="sampler">SAMPLER</option>
				<option value="save_as">SAVE AS</option>
				<option value="scale">SCALE</option>
				<option value="sum" selected="selected">SUM</option>
				<option value="trim">TRIM</option>
				<option value="filter">FILTER</option>
			</select>
		</div>
		<div>
			<div style="float: left" class="aggregatorSampling">
				<div style="float: left">
					<span class="header"
						  style="margin-left: 10px; vertical-align: top;">Sampling</span>
				</div>
				<div style="float: left">
					<input class="ui-widget aggregatorSamplingValue"
						   style="width: 30px; margin-left: 10px;" type="text"
						   value="1"/>
				</div>
				<div style="float: left">
					<select class="ui-widget aggregatorSamplingUnit"
							style="margin-left: 10px;">
						<option value="divisoryears">Years</option>
						<option value="months">Months</option>
						<option value="weeks">Weeks</option>
						<option value="days">Days</option>
						<option value="hours">Hours</option>
						<option value="minutes">Minutes</option>
						<option value="seconds">Seconds</option>
						<option value="milliseconds" selected="selected">
							Milliseconds
						</option>
					</select>
				</div>
				<div style="float: left" class="aggregatorAlignStartTime">
					<span class="header"
						  style="margin-left: 10px; vertical-align: top;">Align start time
					</span>
				</div>
				<div style="float: left" class="aggregatorAlignStartTime">
					<input class="ui-widget aggregatorAlignStartTimeValue"
						   style="margin-left: 10px;" type="checkbox"/>
				</div>
			</div>
			<div style="display: table-cell" class="aggregatorPercentile">
				<span class="header"
					  style="margin-left: 10px; vertical-align: top;">Percentile</span>
			</div>
			<div style="display: table-cell" class="aggregatorPercentile">
				<input class="ui-widget aggregatorPercentileValue"
					   style="width: 40px; margin-left: 10px;" type="text"
					   value="0.75"/>
			</div>
			<div style="display: table-cell" class="divisor">
				<span class="header"
					  style="margin-left: 10px; vertical-align: top;">Divisor</span>
				<input class="ui-widget divisorValue"
					   style="width: 60px; margin-left: 10px;" type="text"/>
			</div>
			<div style="display: table-cell" class="scalingFactor">
				<span class="header"
					  style="margin-left: 10px; vertical-align: top;">Factor</span>
				<input class="ui-widget scalingFactorValue"
					   style="width: 60px; margin-left: 10px;" type="text"
					   value="1.0"/>
			</div>
		</div>

		<div style="float: left" class="aggregatorRate">
			<select class="ui-widget rateUnit" style="margin-left: 10px;">
				<option value="years">Years</option>
				<option value="months">Months</option>
				<option value="weeks">Weeks</option>
				<option value="days">Days</option>
				<option value="hours">Hours</option>
				<option value="minutes">Minutes</option>
				<option value="seconds">Seconds</option>
				<option value="milliseconds" selected="selected">Milliseconds
				</option>
			</select>
		</div>

		<div style="float: left" class="aggregatorFilter">
			<span class="header"
				style="margin-left: 10px; vertical-align: top;">Filter Operation</span>
			<select class="ui-widget aggregatorFilterOpValue"
					style="margin-left: 10px;">
				<option value="eq" selected="selected">EQ</option>
				<option value="lt">LT</option>
				<option value="lte">LTE</option>
				<option value="gt">GT</option>
				<option value="gte">GTE</option>
			</select>

			<span class="header"
				style="margin-left: 10px; vertical-align: top;">Threshold</span>
			<input class="ui-widget aggregatorFilterThresholdValue"
				style="width: 60px; margin-left: 10px;" type="text"/>
		</div>

		<div style="float: left" class="aggregatorTrim">
			<span class="header"
				  style="margin-left: 10px; vertical-align: top;">Trim</span>
			<select class="ui-widget aggregatorTrimValue"
					style="margin-left: 10px;">
				<option value="first" selected="selected">First</option>
				<option value="last">Last</option>
				<option value="both">Both</option>
			</select>
		</div>
		<div style="float: left" class="aggregatorSaveAs">
			<span class="header"
				  style="margin-left: 10px; vertical-align: top;">Save As</span>
			<input class="ui-widget aggregatorSaveAsValue"
				   style="width: 275px; margin-left: 10px;" type="text"/>
		</div>
		<div style="clear: both"></div>
	</div>
</div>

<div id="saveDropdown" class="dropdown dropdown-tip">
	<div class="dropdown-panel">
		<button id="submitButtonCSV" style="margin-top: 10px;">CSV</button>
		<button id="submitButtonJSON" style="margin-top: 10px;">JSON</button>
	</div>
</div>

</body>
</html>
